<template>
  <!--   class="app-container main-bg"-->
  <div id="myChatInfo">
    <div class="dis-flex">
      <div class="info-item">
        <img class="avatar" src="@/assets/avatar/马化腾.jpg" ref="avatarImg" @click="handleDetail" alt="">
        <br>
        <span class="info-item-name">马化腾</span>
      </div>
      <div class="info-item">
        <svg-icon name="add-dashed" :size="34" />
        <br>
        <span class="info-item-name">添加</span>
      </div>
    </div>

    <n-divider />


    <n-list :show-divider="false">
      <n-list-item>
        <n-thing title="聊天记录" />
        <template #suffix>
          <svg-icon name="arrow-right" />
        </template>
      </n-list-item>
      <n-divider />
      <n-list-item>
        <n-thing title="消息免打扰" />
        <template #suffix>
          <n-switch v-model:value="userForm.isDisturb" size="small" />
        </template>
      </n-list-item>
      <n-list-item>
        <n-thing title="置顶聊天" />
        <template #suffix>
          <n-switch v-model:value="userForm.isTop" size="small" />
        </template>
      </n-list-item>
    </n-list>

    <n-divider />

    <div class="text-center">
      <n-button type="error" quaternary @click.stop="handleClearLog">清空聊天记录</n-button>
    </div>

    <!-- 自定义模态弹窗 todo:优化，关闭弹框时不影响drawer -->
    <n-modal
      v-model:show="showConfirmDialog"
      :mask-closable="false"
      :show-close="false"
      :show-mask="false"
      to="body"
    >
      <n-card style="width: 300px">
        <div class="dialog-content text-center">
          <p>清空聊天记录？</p>
          <div class="mt10">
            <n-button tertiary type="error" @click.stop="handleCancel">取消</n-button>
            <n-button secondary type="tertiary" @click.stop="handleClear" style="margin-left: 8px;">清空</n-button>
          </div>
        </div>
      </n-card>
    </n-modal>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useCreateWindow } from "@/hooks/useCreateWindow.js";
const { openBlurWindow, openWindow, showHiddenWindow } = useCreateWindow();
const userForm = ref({
  // 免打扰
  isDisturb: false,
  // 置顶聊天
  isTop: false,
})
const avatarImg = ref(null);
const showConfirmDialog = ref(false)

// 清空按钮
const handleClearLog = () => {
  showConfirmDialog.value = true
}

// 点击头像显示详情，这样动态窗口子窗口，会有一点延迟，但是目前还没找到其他好的解决方案
const handleDetail = () => {
  const imgRect = avatarImg.value.getBoundingClientRect();
  const winLeft = window.screenX;
  const winTop = window.screenY;
  const screenX = Math.round(winLeft + imgRect.left);
  const screenY = Math.round(winTop + imgRect.top);
  console.log('imgX', screenX)
  console.log('imgY', screenY)

  // 这里创建的弹框，高度不固定，应该怎么优化
  openBlurWindow('account/dialog', {
    url: '/account/dialog?userId=123456',
    width: 280,
    height: 310,
    resizable: false,
    decorations: false,
    x: screenX + 44,
    y: screenY,
    skipTaskbar: true,
  })

  // showHiddenWindow('account/dialog', screenX + 44, screenY)
}

// 点击清空
const handleClear = () => {
  console.log('执行清空操作')
  showConfirmDialog.value = false
}

// 点击取消
const handleCancel = () => {
  showConfirmDialog.value = false
}
</script>

<style lang="scss" scoped>
@use "@/assets/css/n-list-reset.scss";
:deep(.myBox) {
  position: absolute;
  right: -500px;
  top: 0;
}
:deep(.n-divider) {
  margin: 10px 0;
}
.avatar {
  width: 34px;
  vertical-align: middle;
}

.info-item {
  margin-right: 16px;
  cursor: pointer;
  line-height: 1;
  text-align: center;
}
.info-item-name {
  font-size: 12px;
  text-align: center;
  color: #4F4F4F;
  margin-top: 2px;
}
.my-icon {
  padding: 5px;
  border: 1px solid #DEDEDE;
}

:deep(.n-list .n-list-item) {
  padding: 4px 0;
}
</style>
